<template>
  <div class="practice">
    <header-title :city="city" :id="id">章节练习</header-title>
    <div class="list">
      <ul>
        <li v-for="(item,index) in chapter" :key="item.id">
          <div class="l">
            <span>{{index+1}}</span>
            <span>{{item.title}}</span>
            <span>{{item.num}}</span>
          </div>
          <div class="r">
            <div class="jiantou"></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import HeaderTitle from "../components/HeaderTitle.vue";

export default {
  name: "ChapterPractice",
  components: { HeaderTitle },
  data() {
    return {
        chapter:[
            {title:'驾驶证和机动车管理规定',num:'564',id:'01'},
            {title:'道路通行条件及通行规定',num:'1242',id:'02'},
            {title:'道路交通安全违法行为及处罚',num:'121',id:'03'},
            {title:'道路交通事故处理相关规定',num:'59',id:'04'},
            {title:'机动车基础知识',num:'184',id:'05'},
            {title:'交通事故救护常识',num:'41',id:'06'},
            ]
    }
  }
};
</script>
<style lang="scss" scoped>
.practice {
  width: 100%;
  .list {
    width: 100%;
    ul {
      width: 100%;
      li {
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        .l {
          padding-left: 15px;
          span:nth-child(1) {
            background-color: #18b4ed;
            color: #fff;
            padding: 3px 6px;
            border-radius: 5px;
          }
          span:nth-child(2) {
            font-size: 17px;
            margin-left: 10px;
          }
          span:nth-child(3) {
            font-size: 14px;
            margin-left: 10px;
            color: #ccc;
          }
        }
        .r {
            height: 100%;
            padding-right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            .jiantou {
                width: 8px;
                height: 8px;
                border-top: 3px solid #bdbdbd;
                border-right: 3px solid #bdbdbd;
                transform: rotate(45deg);
            }
        }
      }
    }
  }
}
</style>